<script setup>
import { ref } from 'vue'
import { addBusinessService } from '@/api/business.js'
import { ElNotification } from 'element-plus'

// 控制抽屉的显示与隐藏
const visibleDrawer = ref(false)

const defaultDTO = {
  projectId: null, // 服务项目id
  memberId: null, // 会员id
  carId: null, // 车辆id
  payMethod: null // 付款方式
}

const businessDTO = ref({ ...defaultDTO })

// 向外暴露方法
const open = () => {
  visibleDrawer.value = true // 打开抽屉
  businessDTO.value = { ...defaultDTO }
}

// 提交逻辑
const emit = defineEmits(['success'])
const handleSubmit = async () => {
  await addBusinessService(businessDTO.value)
  ElNotification({
    title: '新增成功',
    type: 'success'
  })
  visibleDrawer.value = false
  emit('success')
}

// 取消逻辑
const handleCancel = () => {
  visibleDrawer.value = false
  businessDTO.value = { ...defaultDTO }
}

// 点击选择会员
const memberSelectRef = ref()
const handleSelectMember = () => {
  memberSelectRef.value.open()
}
// 处理新增选择的会员
const handleAddSelectedMember = (member) => {
  businessDTO.value.memberId = member.id
}

// 点击选择车辆
const carSelectRef = ref()
const handleSelectCar = () => {
  if (!businessDTO.value.memberId) {
    ElNotification({
      title: '请先选择会员',
      type: 'error'
    })
    return
  }
  carSelectRef.value.open(businessDTO.value.memberId)
}
// 处理新增选择的车辆
const handleAddSelectedCar = (car) => {
  businessDTO.value.carId = car.id
}

// 点击选择服务项目
const projectSelectRef = ref()
const handleSelectProject = () => {
  projectSelectRef.value.open()
}
// 处理新增选择的服务项目
const handleAddSelectedProject = (project) => {
  businessDTO.value.projectId = project.id
}

defineExpose({
  open
})
</script>

<template>
  <el-drawer v-model="visibleDrawer" title="新增业务" size="20%">
    <el-form :model="businessDTO" ref="formRef" label-width="auto">
      <el-form-item label="服务项目ID" prop="projectId">
        <el-tag v-if="businessDTO.projectId" type="primary" size="large" style="width: 50px"
          >{{ businessDTO.projectId }}
        </el-tag>
        <el-button v-else type="primary" plain @click="handleSelectProject">选择服务项目</el-button>
        <el-button
          v-show="businessDTO.projectId"
          type="danger"
          plain
          style="margin-left: 20px"
          @click="businessDTO.projectId = null"
          >重新选择
        </el-button>
      </el-form-item>
      <el-form-item label="会员ID" prop="memberId">
        <el-tag v-if="businessDTO.memberId" type="primary" size="large" style="width: 50px"
          >{{ businessDTO.memberId }}
        </el-tag>
        <el-button v-else type="primary" plain @click="handleSelectMember">选择会员</el-button>
        <el-button
          v-show="businessDTO.memberId"
          type="danger"
          plain
          style="margin-left: 20px"
          @click="businessDTO.memberId = null"
          >重新选择
        </el-button>
      </el-form-item>
      <el-form-item label="车辆ID" prop="carId">
        <el-tag v-if="businessDTO.carId" type="primary" size="large" style="width: 50px"
          >{{ businessDTO.carId }}
        </el-tag>
        <el-button v-else type="primary" plain @click="handleSelectCar">选择车辆</el-button>
        <el-button
          v-show="businessDTO.carId"
          type="danger"
          plain
          style="margin-left: 20px"
          @click="businessDTO.carId = null"
          >重新选择
        </el-button>
      </el-form-item>
      <el-form-item label="付款方式" prop="payMethod">
        <el-select v-model="businessDTO.payMethod" style="width: 160px">
          <el-option label="余额" value="余额"></el-option>
          <el-option label="微信" value="微信"></el-option>
          <el-option label="支付宝" value="支付宝"></el-option>
          <el-option label="现金" value="现金"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="handleSubmit">提交</el-button>
        <el-button type="info" plain @click="handleCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
  <ProjectSelect ref="projectSelectRef" @add="handleAddSelectedProject"></ProjectSelect>
  <MemberSelect ref="memberSelectRef" @add="handleAddSelectedMember"></MemberSelect>
  <CarSelect ref="carSelectRef" @add="handleAddSelectedCar"></CarSelect>
</template>
